<template>
    <div class="popover-com">
			<div @click="onClik($event)">
				<slot name="list">
					<div class="list" >
						<!-- vue中自定义属性格式为 data-xxx
						获取为：e.target.dataset.xxx -->
						<div class="item" :data-item="JSON.stringify(item)" v-for="(item,index) in list" :key="index">{{ item.name }}</div>
					</div>
				</slot>
			</div>

			<div class="dialog"  v-show="show">
				<slot name="dialog">
					<div>
						{{ item }}
					</div>
				</slot>
			</div>
    </div>
</template>
<script>
export default {
  name: 'popover-com',
  data() {
    return {
      show:false,
      item:null,
      list:[
        { name:'item1',val:'item1其他' },
        { name:'item2',val:'item2其他' },
        { name:'item3',val:'item3其他' },
      ]
    }
  },
  mounted(){
  },
  methods:{
    onClik(e){
      console.log(Boolean(e.target.dataset.item));
      // 1.先判断点击的是list中的item还是list
      if(e.target.dataset.item){
        // 2.算出点击元素的位置
        let clientRect = e.target.getBoundingClientRect();
        const { top,left } = clientRect
        console.log(top,left);
        console.log(clientRect);
        // 4.通过自定义属性拿到绑定的item
        // vue中自定义属性格式为 :data-xxx,获取为：e.target.dataset.xxx
        // console.log(e.target.dataset.item);
        // 先赋值再显示，再移动位置
        this.item = JSON.parse(e.target.dataset.item)
        this.show = true
        this.$nextTick(() => {
          // 3.计算出弹框要显示的位置 + 绝对定位
          let dialogDom = document.querySelector('.dialog')
          dialogDom.style.position = 'absolute'
          dialogDom.style.left = `${ left }px`
          dialogDom.style.top = `${ top }px`
        })
      }else{
        return
      }
    },
  }
}
</script>
<style lang="scss" scoped>
@function companyW($num) {
  @return ($num * 100)/1920;
}
@function companyH($num) {
  @return ($num * 100)/1080;
}
.popover-com{

	.list{
		width: 600px;
		height: 200px;
		background-color: aquamarine;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: flex;
		justify-content: space-between;
		.item{
			width: 160px;
			height: 200px;
			background-color: pink;
		}
	}

	.dialog{
		width: 100px;
		height: 80px;
		background-color: beige;
	}
}
</style>
